<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input表单元素</title>
</head>

<body>
    <form>
        <!-- test 文本框，用户可以在里面输入任何文字 -->
        用户名：<input type="text" name="username"><br>
        <!-- password 密码框，用户看不见输入的密码  例如下 -->
        <!-- maxlength 是规定输入字段中的字符的最大长度 -->
        密码：<input type="password" name="psw" maxlength="20"><br>
        <!-- radio 单选按钮，可以实现多选一 -->
        <!-- name 是表单元素名字，这里的性别单选按钮必须有相同的name，才可以实现多选一 -->
        <!-- 单选按钮和复选框可以设置checked 属性，当页面打开的时候就可以默认选这个值 -->
        性别：男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女"><br>
        <!-- checkbox 复选框，可以实现多选 -->
        爱好：吃饭<input type="checkbox" name="hobby" value="吃饭">
        <!-- checked例子 -->
        睡觉<input type="checkbox" name="hobby" value="睡觉" checked="checked">
        打豆豆<input type="checkbox" name="hobby" value="打豆豆"><br>
        <!-- submit 提交按钮，点击了提交按钮，可以把表单域form 里面的表单元素 里面的值，提交给后台服务器 -->
        <input type="submit" value="免费注册">
        <!-- reset 重置按钮，可以还原表单的默认状态 -->
        <input type="reset" value="重新填写"><br>
        <!-- button 普通按钮 后期结合js 搭配使用 -->
        <input type="button" value="获取验证码"><br>
        <!-- 上传头像（图片，文件） -->
        上传头像：<input type="file">

    </form>
</body>

</html>